<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/font-awesome.css" rel="stylesheet">
    <link href="/css/datatables.min.css" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <script src="/js/jquery-3.1.1.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/main.js"></script>
    <style>
        body {
            background-size: cover;
            background-repeat: no-repeat;
        }

        #time_body {
            margin: auto;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            height: 50%;
            width: 90%;
        }

        .time {
            font-size: 35px;
        }
    </style>
</head>
<body onLoad="startTime()" style="background-color:whitesmoke">
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>签到页面</h2>

    </div>
</div>

<div id="body1" class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox-content m-b-sm border-bottom">
        <div class="row">
            <form role="form" class="form-horizontal">
                <div class="form-group">
                    <label class="col-sm-2 control-label">当前时间</label>
                    <div class=" col-sm-2" id="time_body">
                        <div id="beijing" class="time"></div>
                    </div>

                    <label class="col-sm-2 control-label">请及时签到签退</label>
                    <div>
                        <div>
                            <button class="btn btn-primary btn-sm" type="button" @click="signIn()">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-emoji-frown-fill" viewBox="0 0 16 16">
                                    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm-2.715 5.933a.5.5 0 0 1-.183-.683A4.498 4.498 0 0 1 8 9.5a4.5 4.5 0 0 1 3.898 2.25.5.5 0 0 1-.866.5A3.498 3.498 0 0 0 8 10.5a3.498 3.498 0 0 0-3.032 1.75.5.5 0 0 1-.683.183zM10 8c-.552 0-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5S10.552 8 10 8z"/>
                                </svg> 上班打卡
                            </button>
                            <button class="btn btn-primary btn-sm" type="button" @click="signOut()">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-emoji-laughing-fill" viewBox="0 0 16 16">
                                    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM7 6.5c0 .501-.164.396-.415.235C6.42 6.629 6.218 6.5 6 6.5c-.218 0-.42.13-.585.235C5.164 6.896 5 7 5 6.5 5 5.672 5.448 5 6 5s1 .672 1 1.5zm5.331 3a1 1 0 0 1 0 1A4.998 4.998 0 0 1 8 13a4.998 4.998 0 0 1-4.33-2.5A1 1 0 0 1 4.535 9h6.93a1 1 0 0 1 .866.5zm-1.746-2.765C10.42 6.629 10.218 6.5 10 6.5c-.218 0-.42.13-.585.235C9.164 6.896 9 7 9 6.5c0-.828.448-1.5 1-1.5s1 .672 1 1.5c0 .501-.164.396-.415.235z"/>
                                </svg> 打卡下班
                            </button>
                        </div>
                    </div>

                </div>
            </form>
        </div>
    </div>


    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 模态框开始 -->
<div id="one" class="modal fade" style="top:200px">
    <div class="modal-dialog">

        <div class="modal-content">
            <!--头部-->
            <div class="modal-header">
                <h4 align="center">新增</h4>

            </div>
            <!--主题内容-->
            <div class="modal-body">
                <form role="form" class="form-horizontal">
                    <div class="form-group">
                        <label class=" col-sm-2 control-label">签到时间</label>
                        <div class=" col-sm-10">
                            <input type="text" class="form-control" id="name" placeholder="请输入姓名">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2  control-label">学历</label>
                        <div class=" col-sm-10">
                            <select class="form-control" id="s">
                                <option>本科</option>
                                <option>专科</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>

            <!--底部-->
            <div class="modal-footer">
                <button class="btn btn-primary btn-sm" type="button" onclick="closeWin()"><span
                        class="glyphicon glyphicon-remove"></span>关闭
                </button>
                <button class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-save"></span>保存</button>
            </div>

        </div>
    </div>
</div>
</body>

<script>
    //显示模态框
    function add() {
        $("#one").modal("show")
    }

    //关闭模态框
    function closeWin() {
        $("#one").modal("hide")
    }

    $(function () {
        new Vue({
            el: "#body1",
            data: {
                list: [],
                // 获取session中的用户id
                sysId: ""
            },
            methods: {
                loadData: function () {
                    var self = this;
                    $.ajax({
                        url: "/user/sysId",
                        type: "post",
                        dataType: "json",
                        success: function (data) {
                            self.sysId = data.sysId;
                            console.log(data.sysId)
                        }
                    })
                },
                signIn: function () {
                    var self = this;
                    $.ajax({
                        url: "/kaoqing/SignIn",
                        type: "post",
                        // post提交方式需要指定请求体类型
                        contentType: "application/x-www-form-urlencoded",
                        // 传入的数据
                        data: {"sysId": self.sysId},
                        // 返回的数据类型
                        dataType: "json",
                        success: function (data) {
                            console.log(data);
                            console.log(data.info);
                            alert(data.info)
                        }
                    });
                },
                signOut: function () {
                    var self = this;
                    $.ajax({
                        url: "/kaoqing/SignOut",
                        type: "post",
                        // post提交方式需要指定请求体类型
                        contentType: "application/x-www-form-urlencoded",
                        // 传入的数据
                        data: {"sysId": self.sysId},
                        // 返回的数据类型
                        dataType: "json",
                        success: function (data) {
                            console.log(data);
                            console.log(data.info);
                            alert(data.info)
                        }
                    });
                }
            },
            mounted() {
                this.loadData();
            }
        });
    });

    function startTime() {
        document.getElementById('beijing').innerHTML = calcTime(+8)
        t = setTimeout('startTime()', 1000)
    }

    function checkTime(i) {
        if (i < 10) {
            i = "0" + i
        }
        return i
    }

    function calcTime(offset) {
        var d = new Date();
        var utc = d.getTime() + (d.getTimezoneOffset() * 60000);
        var nd = new Date(utc + (3600000 * offset));
        var h = nd.getHours()
        var m = nd.getMinutes()
        var s = nd.getSeconds()
        h = checkTime(h)
        m = checkTime(m)
        s = checkTime(s)
        return h + ":" + m + ":" + s
    }
</script>
</html>